<template>
    <div class="devicepage flex flex-start">
        <div class="left">
            <div class="left-page flex flex-column">
                <div class="left-page-header flex">
                    <div @click="udpSerach(2)" class="item-left">扫描全部</div>
                    <p class="item-hr"></p>
                    <div @click="udpSerach(1)" class="item-left">扫描单个</div>
                </div>
                <div class="left-page-body">
                    <div class="left-page-body-page">
                        <ul class="list" v-infinite-scroll="originLoad" infinite-scroll-disabled="disabled">
                            <li @click="clickOrigin(index)" v-for="(item, index) in originCount" :key="item.id"
                                :class="{ 'isDisabled': item.deviceNumber > 0 }" class="flex flex--center">
                                <p class="flex1">
                                    <i :class="allotDeviceTypeIcon[item.type || 0]"></i>
                                </p>
                                <el-tooltip class="item" effect="dark" :content="'123123'" placement="top-start">
                                    <p class="flex2">防潮间的尾随产品的尾随产品的尾随产品</p>
                                </el-tooltip>
                                <!-- <p class="flex3">
                                    <i class="el-icon-link"></i>
                                </p> -->
                            </li>
                        </ul>
                        <p class="origin-loading" v-if="originLoading">加载中...</p>
                        <p class="origin-nomore" v-if="noMore">没有更多了</p>

                    </div>

                </div>
            </div>
        </div>
        <div class="right">
            <div class="right-page flex flex-column">
                <div class="right-page-header flex">
                    <div class="header-left flex flex--center">
                        <el-button size="mini" @click="changeAllDevice(1)" type="primary">全 选</el-button>
                        <el-button size="mini" @click="changeAllDevice(2)" type="danger">全不选</el-button>

                        <el-button :disabled="!permissionInfo.add" size="small" class="ml30" @click="allotDevice"
                            type="primary">分 配</el-button>
                        <el-button :disabled="!permissionInfo.oper" size="small" @click="operDevice" type="primary">操
                            作</el-button>
                        <el-button :disabled="!permissionInfo.update" size="small" @click="editDevices" type="primary">编
                            辑</el-button>
                        <el-button :disabled="!permissionInfo.delete" size="small" @click="delDevices" type="danger">删
                            除</el-button>

                        <div class="ml30 mr10" style="width: 200px;">
                            <el-input v-model="serachIP" clearable placeholder="输入IP"></el-input>
                        </div>
                        <span>
                            <el-button :disabled="!permissionInfo.select" size="small" @click="serachClick" type="primary">查
                                询</el-button>
                        </span>

                    </div>
                    <div class="header-right">
                        设备列表
                    </div>
                </div>

                <div class="right-page-body">
                    <div class="page-body-div flex" v-infinite-scroll="deviceLoad"
                        infinite-scroll-disabled="deviceDisabled">
                        <div class="device-card flex flex-column" v-for="(item, index) in deviceCount" :key="item.id">
                            <div class="device-card-page isNoOnline" :class="{ 'isOnline': index % 2 == 0 }">
                                <div class="top">
                                    <i class="el-icon-check"></i>
                                </div>
                                <div class="midden flex flex-center flex--center">
                                    <i class="el-icon-cpu"></i>
                                </div>
                                <div class="midden-state textcenter">12</div>
                                <div class="bottom">
                                    <p class="textcenter">192.168.11.21</p>
                                    <el-tooltip class="item" effect="dark" :content="'123123'" placement="top-start">
                                        <p title="" class="textcenter bottom-text">尾箱库尾箱库尾箱库尾箱库尾箱库尾箱库尾箱库</p>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="origin-loading" v-if="deviceLoading">加载中...</p>
                    <p class="origin-nomore" v-if="deviceNoMore">没有更多了</p>

                </div>

            </div>

        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            permissionInfo: {
                add: false,
                select: false,
                oper: false,
                update: false,
                delete: false,
            },

            originCount: 10,
            deviceCount: 10,

            originLoading: false,
            deviceLoading: false,

            originList: [],
            serachIP: "",

            deviceChange: [], // 选择的设备标记

            allotDeviceTypeIcon: {
                '1': 'el-icon-location',
                '0': 'el-icon-location-outline'
            },

        };
    },

    computed: {
        noMore() {
            return this.originCount > 50;
        },
        disabled() {
            return this.originLoading || this.noMore
        },
        deviceNoMore() {
            return this.deviceCount > 50;
        },
        deviceDisabled() {
            return this.deviceLoading || this.deviceNoMore
        }
    },

    methods: {
        permissionCheck() {
            let permissionList = this.$store.getters.roleInfo.device;
            Object.assign(this.permissionInfo, permissionList);
            return;
        },
        getData() {
            let data = Object.assign({}, this.serachForm, this.pageInfo);
            this.loading = true;
            // getUser(data).then(res => {
            //     this.tableData = res.data;
            //     this.pageInfo.total = res.total;

            //     this.loading = false;
            // }).catch(err => {
            //     this.loading = false;
            //     this.$message.error("网络有点小问题!");
            // });
            return;
        },
        // 点击 区域
        clickOrigin(index) {
            // 非禁用状态才能操作
            if (!this.originList[index].deviceNumber > 0) {

            }
        },
        // type: 1扫描单个  2扫描全部
        udpSerach(type) {

        },

        originLoad() {
            this.originLoading = true
            setTimeout(() => {
                this.originCount += 10
                this.originLoading = false
            }, 2000)
        },

        deviceLoad() {
            this.deviceLoading = true
            setTimeout(() => {
                this.deviceCount += 10
                this.deviceLoading = false
            }, 2000)
        },

        deviceBoxCheck() {
            if (this.deviceChange.length == 0) {
                this.$message.error("请先勾选对应的设备");
                return false;
            }
            return true;

        },

        // type 1全选 2全不选
        changeAllDevice(type) {

        },
        // 删除
        delDevices() {

        },
        // 编辑
        editDevices() {
            if (this.deviceBoxCheck()) {

            }
        },
        // 操作
        operDevice() {

        },
        // 分配
        allotDevice() {
            if (this.deviceBoxCheck()) {

            }
        },
        // 查询
        serachClick() {

        },

    },

    mounted() {
        this.permissionCheck();
        if (this.permissionInfo.select) {
            this.getData();
        }
    }
}
</script>

<style lang="scss" scoped>
.devicepage {
    margin: 15px 20px;
    height: calc(100% - 25px);
    // height: 82vh;
    min-height: 0px;
    background-color: #fff;
    border-radius: 5px;

    .left {
        width: 25%;
        height: 100%;
        min-height: 0px;
        max-width: 220px;
        box-shadow: 3px 0px 5px 1px rgba(0, 0, 0, 0.1);
        overflow: hidden;

        .left-page {
            width: 100%;
            height: 100%;
            min-height: 0px;
            overflow: hidden;

            .left-page-header {
                height: 50px;
                background-color: $primary-color;
                color: #fff;
                border-radius: 5px 0 0 0;
                cursor: pointer;
                overflow: hidden;

                .item-hr {
                    height: 25px;
                    width: 1;
                    border-left: 1px solid #f7f7f7;
                    margin-top: 13px;

                    &:hover {
                        background-color: $second-color;
                    }
                }

                .item-left {
                    width: 50%;
                    line-height: 50px;
                    text-align: center;

                    &:hover {
                        background-color: $second-color;
                    }
                }

            }

            .left-page-body {
                flex: 1;
                min-height: 0px;
                overflow: hidden;

                .left-page-body-page {
                    width: 100%;
                    height: 100%;
                    overflow-y: auto;

                    &::-webkit-scrollbar-thumb {
                        border-radius: 0 0 5px 5px !important;
                        background-color: $primary-color !important;
                    }

                    &::-webkit-scrollbar {
                        border-radius: 5px !important;
                        width: 5px !important;
                    }

                    &::-webkit-scrollbar-track {
                        border-radius: 5px !important;
                    }

                    .list {
                        list-style-type: none;
                        cursor: pointer;

                        li {
                            &:hover {
                                background-color: $hover-color;
                            }

                            line-height: 45px;

                            .flex1 {
                                width: 25px;
                                font-size: 18px;
                                text-align: center;
                            }

                            .flex2 {
                                flex: 1;
                                font-size: 17px;
                                overflow: hidden;
                                /* 隐藏溢出内容 */
                                text-overflow: ellipsis;
                                /* 显示省略号 */
                                white-space: nowrap;
                                /* 禁止换行 */
                            }

                            .flex3 {
                                width: 25px;
                                font-size: 18px;
                                text-align: center;
                            }

                        }

                        .isDisabled {
                            cursor: not-allowed;
                            /* 显示🚫禁止符号 */
                            opacity: 0.6;
                            /* 降低透明度，增强禁用视觉效果 */
                        }

                        .isActive {
                            background-color: $primary-color;
                            color: #fff;
                        }

                    }

                }
            }
        }

    }

    .right {
        flex: 1;
        overflow: hidden;
        padding: 0 0px 10px 20px;

        .right-page {
            width: 100%;
            height: 100%;
            overflow: hidden;

            .right-page-header {
                width: 100%;
                height: 45px;
                border-bottom: 1px solid #c4c4c4;

                .header-left {
                    width: 75%;
                    height: 100%;
                }

                .header-right {
                    width: 25%;
                    height: 100%;
                    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
                    background-color: $second-color;
                    color: #fff;
                    text-align: center;
                    line-height: 50px;
                    font-size: 27px;
                    letter-spacing: 5px;
                }
            }

            .right-page-body {
                flex: 1;
                overflow: hidden;
                overflow-y: auto;
                padding: 10px;

                &::-webkit-scrollbar-thumb {
                    border-radius: 0 0 5px 5px !important;
                    background-color: $second-color !important;
                }

                &::-webkit-scrollbar {
                    border-radius: 5px !important;
                    width: 5px !important;
                }

                &::-webkit-scrollbar-track {
                    border-radius: 5px !important;
                }

                .page-body-div {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;

                    .device-card {
                        position: relative;
                        width: 170px;
                        height: 200px;
                        margin: 10px 20px;
                        overflow: hidden;
                        border-radius: 10px;
                        color: #fff;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                        /* 初始阴影 */
                        transition: all 0.3s ease-in-out;

                        /* 过渡动画 */
                        &:hover {
                            transform: translateY(-5px);
                            /* 上移距离 */
                            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
                            /* 更强的阴影 */
                        }

                        .device-card-page {
                            width: 100%;
                            height: 100%;
                            padding: 5px;

                            .top {
                                position: absolute;
                                width: 30px;
                                height: 30px;
                                border-radius: 50%;
                                background-color: #fff;
                                color: $success-color;
                                top: 10px;
                                right: 10px;
                                text-align: center;
                                line-height: 30px;
                                font-size: 20px;
                                font-weight: bold;
                            }

                            .midden {
                                flex: 1;
                                font-size: 70px;
                                color: #fff;
                                margin-top: 20px;
                            }

                            .midden-state {
                                height: 40px;
                                line-height: 40px;
                            }

                            .bottom {
                                height: 60px;

                                p {
                                    height: 50%;
                                }

                                .bottom-text {
                                    overflow: hidden;
                                    /* 隐藏溢出内容 */
                                    text-overflow: ellipsis;
                                    /* 显示省略号 */
                                    white-space: nowrap;
                                    /* 禁止换行 */
                                }
                            }
                        }

                        .isNoOnline {
                            background-color: $noonline-color;
                        }

                        .isOnline {
                            background-color: $second-color;
                        }


                    }


                }


            }
        }
    }

    .origin-loading,
    .origin-nomore {
        line-height: 40px;
        color: #575757;
        text-align: center;
        background-color: $hover-color;
        cursor: default;
        border-radius: 5px;
    }

    .origin-nomore {
        color: #fff;
        background-color: $danger-color;
    }
}
</style>
